<template>
  <div>
    <el-dialog title="登录" :visible.sync="loginDialogVisible" width="300px">
      <el-form :model="LoginList" :rules="formRules" ref="formNames">
        <el-form-item prop="username">
          <el-input v-model="LoginList.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="LoginList.password" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="width:100%;" @click="logins">登录</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import API from "../API/Api";
export default {
  name: "Login",
  props: ["booleans"],
  data() {
    var checkUser = (rule, value, callback) => {
      var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,18}$/;
      if (reg.test(value)) {
        // 格式正确返回true
        callback();
      } else {
        // 格式不正确
        callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }
    };
    //密码验证
    var checkPass = (rule, value, callback) => {
      var mobileReg = /^[a-zA-Z][a-zA-Z0-9_]{5,18}$/;
      if (mobileReg.test(value)) {
        // 格式正确返回true
        callback();
      } else {
        // 格式不正确
        return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }
    };
    return {
      loginDialogVisible: false,
      LoginList: {
        username: "",
        password: ""
      },
      formRules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { validator: checkUser, trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: checkPass, trigger: "blur" }
        ]
      },
      trueFalse: false
    };
  },
  mounted() {
    //    this.loginDialogVisible= this.$store.state.loginDialogVisible;
    //      console.log(this.loginDialogVisible)
  },
  methods: {
    logins() {
      this.$refs.formNames.validate(valid => {
        if (!valid) {
          return;
        }
        let data = {
          userName: this.LoginList.username,
          password: this.LoginList.password
        };
        API.logins(data).then(res => {
          console.log(res);
          if (res.msg === "登录成功") {
            this.$notify.success({
              title: "登录",
              message: "这是一条成功的提示消息"
            });
            // console.log(res.msg);
            this.trueFalse = true;
            (this.loginDialogVisible = false), this.$emit("bools");
            this.$store.commit("logintrue", this.trueFalse);
            let objs = {
              trueFalse: this.trueFalse,
              username: res.user.userName,
              user_id: res.user.user_id
            };
            this.$store.commit("logintrue", objs);
            return;
          } else {
            // console.log(res.msg);
            this.trueFalse = false;
            return;
          }
        });
      });
    }
  },
  computed: {},
  components: {},
  watch: {
    booleans(val) {
      if (val) {
        this.loginDialogVisible = val;
        this.$emit("bools");
      }
    }
    // loginDialogVisible() {}
  },
  getters: {}
};
</script>

<style scoped>
</style>